<!<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/Flat-UI/dist/css/flat-ui.min.css"/>
    <script src="static/Flat-UI/dist/js/vendor/jquery.min.js"></script>
    <script src="static/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="static/Flat-UI/dist/js/flat-ui.min.js"></script>
    <title></title>
    <style>
        .row{
            margin-left: 20px;
            margin-right: 20px;;
        }
        p {
            white-space: nowrap;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .line-center{
            line-height:50px;
            text-align: center;
        }
        .row input{
            width: 50px;
        }
        .list-group-item:hover{
            background: #27ae60;

        }
        .list-group-item div:first-child:hover{

            cursor: pointer;
        }
        .black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=88); 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 40%; 
            width: 20%; 
            height: 45%; 
            padding: 20px;  
            background: url("../static/img/zs.jpg") no-repeat;
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style>
    <script>
        $(function () {
            $('#myTabs a').click(function (e) {
                $(this).tab('show')
            });
        })
        function myClick(bookid){
           location.href = "/bookinfo?bookid="+bookid.toString();
        }
        function btnClick(){
            alert("btn");
            return false;
        }
        $(function(){
        })
    </script>

</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">这什么东西</span>
            </button>
            <a class="navbar-brand" href="/">图书推荐系统</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">首页</a></li>
                <li><a href="/historical">历史评分</a></li>
                <li><a href="/user">个人中心</a></li>
            </ul>
            {% if not login %}
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a href="/loginForm">登录</a></li>
                    <li><a href="/registerationForm">注册</a></li>
                    <li>
                        <a href="/order"><span class="glyphicon glyphicon-shopping-cart">书单</span></a></li>
                </ul>
            {% else %}
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a>{{ useid }}</a></li>
                    <li><a href="/logout">注销</a></li>
                    <li>
                        <a href="/order"><span class="glyphicon glyphicon-shopping-cart">书单</span></a></li>
                </ul>
            {% endif %}
        </div><!--/.nav-collapse -->
    </div>
</div>
<!--content-->
<div class="container">
    <div class="row thumbnail center">
        <div class="col-sm-12">
            <h1 class="text-center" style="margin-bottom: 30px">购物车</h1>
        </div>
        <div class="col-sm-12 thumbnail">
            <div class="col-sm-3 line-center">订单编号</div>
            <div class="col-sm-2 line-center">书籍名称</div>
            <div class="col-sm-2 line-center">作者 </div>
            <div class="col-sm-2 line-center">订单总价</div>
            <div class="col-sm-3 line-center">操作</div>
        </div>

    <div class="list-group">
            {% for book in books %}
            <div class="col-sm-12  list-group-item" onclick="myClick('{{book[0]}}')">
                <div class="col-sm-3 line-center" >{{book[0]}}</div>
                <div class="col-sm-2 line-center"><p>{{book[1]}}</p></div>
                <div class="col-sm-2 line-center"><p>{{book[2]}}</p></div>
                <div class="col-sm-2 line-center">{{book[3]}}</div>
                <div class="col-sm-3 line-center">
                <a href="/delete?bookid={{book[0]}}" bookid="{{ book[0] }}"><button class="btn btn-danger">删除订单</button></a>
                </div>
            </div>
            {% endfor %}
    </div>
</div>
<div class="col-sm-12 ">
    <div class="col-sm-3 line-center"></div>
    <div class="col-sm-3 line-center"></div>
    <div class="col-sm-3 line-center"></div>
    <div class="col-sm-3 line-center">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
    <button class="btn btn-success">下单</button>
    </a></div>
</div>
<div id="light" class="white_content" >
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">关闭</a>
</div> 
<div id="fade" class="black_overlay"></div> 

</body>
</html>